<template>
<!-- 横向导航栏 -->
  <div class="allMine" ref="content" >
    <ul class="clearfix" ref="ulList"  @mousedown="startMove($event)" @mousemove="moveUlist($event)" @mouseup="stopMove" @mouseleave="stopMove">
      <li
        v-for="(item, index) in navList"
        :ref="item.name"
        :key="index"
        :class="{'select': ifSelect === item.name || defaultIndex === index}"
        @click.stop="changeType(item.name, index)"
      >
      <span class="navName">{{ item.name }}</span>
      <span v-show="item.number">({{item.number}})</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    navList: {
      require: Array,
      default: () => { return [] }
    },
    defaultIndex: {
      require: Number,
      default: 0
    }
  },
  data () {
    return {
      ifSelect: '',
      isClick: false,
      startLeft: 0,
      left: ''
    }
  },
  watch: {
    navList (newList, oldList) {
      if (oldList.length > newList.length) {
        this.$refs.ulList.style.left = this.$_resetSize(30) + 'px'
      }
    }
  },
  computed: {
  },
  methods: {
    changeType (name, index) {
      try {
        const currentLiLeft = this.$refs[name][0].offsetLeft
        const contWidth = this.$refs.content.offsetWidth
        const ulListWidth = this.$refs.ulList.offsetWidth
        const restWidth = ulListWidth - currentLiLeft
        if (restWidth > contWidth) {
          this.$refs.ulList.style.left = -this.$refs[name][0].offsetLeft + this.$_resetSize(30) + 'px'
        }
      } catch (error) {

      }
      this.ifSelect = name
      this.$emit('navClick', index)
    },
    startMove (e) {
      const contWidth = this.$refs.content.offsetWidth
      const ulListWidth = this.$refs.ulList.offsetWidth
      if (ulListWidth > contWidth) {
        this.startLeft = e.layerX
        this.isClick = true
      }
      // // console.log(111, e)
    },
    stopMove () {
      this.$refs.ulList.style.transitionDuration = '0.5s'
      this.isClick = false
    },
    moveUlist (e) {
      this.$refs.ulList.style.transitionDuration = '0.2s'
      if (this.isClick) {
        const contWidth = this.$refs.content.offsetWidth
        const ulListWidth = this.$refs.ulList.offsetWidth
        const currentLeft = this.$refs.ulList.style.left
        const moveSize = e.layerX - this.startLeft
        const left = moveSize + Number(currentLeft.split('px')[0]) - this.$_resetSize(30)
        // // console.log(222, left)
        if (Math.abs(moveSize) < this.$_resetSize(50)) {
          return
        }
        if (left <= (contWidth - ulListWidth)) {
          this.$refs.ulList.style.left = (contWidth - ulListWidth) + 'px'
          return
        }
        if (left >= this.$_resetSize(30)) {
          this.$refs.ulList.style.left = this.$_resetSize(30) + 'px'
          return
        }
        this.$refs.ulList.style.left = left + 'px'
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.allMine {
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  height: 64px;
  position: relative;
  overflow: hidden;
  ul {
  position: absolute;
  left: 30px;
  height: 64px;
  white-space: nowrap;
  transition: all ;
  li {
      line-height: 64px;
      height: 64px;
      display: inline-block;
      min-width: 64px;
      text-align: center;
      margin-right: 100px;
      cursor: pointer;
      .navName{
        width:81px;
        height:25px;
        font-size:18px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:25px;
      }
    }
    // li:last-of-type{
    //   // margin-right: 0;
    // }
    .select {
        border-bottom: 4px solid #4868FF;
        box-sizing: border-box;
        .navName{
          color: #4868FF !important;
        }
      }
  }
}
</style>
